<template>
	<view class="carProNum">
	   <u-number-box v-model="item.numvalue" @change="numChange" min="0" max="10">
	           <view
	               slot="minus"
	               class="minus numbtn" :class="item.numvalue<=0?'hide':''"
	           >
	               <u-icon
	                   name="minus"
	                   size="12"
	               ></u-icon>
	           </view>
	           <text
	               slot="input"
	               style="width: 50px;text-align: center;"
	               class="input" :class="item.numvalue<=0?'hide':''"
	           >{{item.numvalue}}</text>
	           <view
	               slot="plus"
	               class="plus numbtn"
	           >
	               <u-icon
	                   name="plus"
	                   color="#fff"
	   				 bgColor="#EC544F"
	   				 iconStyle="color: #fff"
	                   size="12"
	               ></u-icon>
	           </view>
	       </u-number-box>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex';
	export default {
		name:"car-pro-num",
		data() {
			return {
				// value:0,
			};
		},
		props:{
			item:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		methods: {
			...mapMutations(["setCarsList"]),
			numChange(e) {
				console.log('当前值为: ' + e.value)
				console.log(this.item)
				this.setCarsList({item:this.item,num:e.value})
			}
		}
	}
</script>

<style lang="scss">
	.carProNum{
		.numbtn{ padding: 8rpx; border-radius: 6rpx;}
		.minus{ background: transparent; border: 1px solid $border-color;}
		.input{ font-size: 26rpx; color: $text-font-color2; width: 70rpx !important;}
		.plus{ background: $brand-theme-color; color: #fff;}
		
	}
	.hide{ display: none;}
</style>
